<template>
    <div class='wrap'>
      <div class="levelup-main" :class="levelupClass">
        <div id="btn_h" @click='levelup'></div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      levelupClass: ''
    }
  },
  methods: {
    levelup () {
      this.$router.push('/competition/' + this.GLOBAL.player.level)
    },
    randomBy () {
      let index = Math.floor(Math.random() * 3)
      this.levelupClass = 'levelupClass' + index
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'bg2img'
    this.randomBy()
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bg2img')
  },
  computed: {
    canLottery () {
      return this.GLOBAL.player.hasLottery
    }
  }
}
</script>

<style>
.bg2img {
  background:url('../assets/lost/bg_19.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.levelup-main {
  display: flex;
  min-height: 36rem;
  min-width: 20.5rem;
  flex-direction: column-reverse;
  align-items: center;
}
.levelupClass0 {
    background:url('../assets/levelup/bg_21.png') no-repeat;
    background-size:20.5rem;
}
.levelupClass1 {
    background:url('../assets/levelup/bg_57.png') no-repeat;
    background-size:20.5rem;
}
.levelupClass2 {
    background:url('../assets/levelup/bg_58.png') no-repeat;
    background-size:20.5rem;
}
.levelup-main #btn_h {
  height: 3rem;
  width: 13rem;
  background:url('../assets/levelup/btn.png') no-repeat;
  background-size:13rem 3rem;
  margin-bottom: 5rem;
}
</style>
